<template>
  <div class="k5">
    <h4><dv-decoration-7>继续深造意向</dv-decoration-7></h4>
    <dv-border-box-10 :color="['#50649a', '#50649b']">
      <div class="keep">
        <div ref="myChart8" id="passDiv2"></div>
        <div ref="myChart7" id="passDiv1"></div>
      </div>
    </dv-border-box-10>
  </div>
</template>

<script>
import * as echarts from "echarts";
import pubsub from "pubsub-js";
import { zhuti } from "../assets/index.js";
export default {
  data() {
    return {
      // 考研的数据
      kaoyan: [],
      //出国的数据
      chuguo: [],
      majorInfo: [], //订阅的消息
      //三率数据选择区
      srate: [
        {
          value: "一班",
          label: "抬头率",
        },
        {
          value: "二班",
          label: "点头率",
        },
        {
          value: "三班",
          label: "出勤率",
        },
      ],
      label: "抬头率",
      // 出勤率数据
      appear: [],
      // 抬头率数据存放
      up: [],
      //点头率数据存放
      shake: [],
      // 用于绑定数据的逻辑此处不用变
      sanlv: [0.73, 0.85, 0.93],
    };
  },
  created() {},
  mounted() {
    this.pubId = pubsub.subscribe("selectMajorInfo", (msgName, data) => {
      // console.log("深造比", data);
      this.majorInfo = data;
      // this.generateRandomNumbers();
      // this.updateChartData();
      this.getInfo();
    });
    // this.generateRandomNumbers();
    // this.updateChartData();
  },
  methods: {
    // generateRandomNumbers() {
    //   this.appear = [];
    //   this.up = [];
    //   this.shake = [];
    //   for (let i = 0; i < 3; i++) {
    //     const randomNumber1 = Math.floor(Math.random() * (100 - 50 + 1)) + 50; // 生成50到100之间的随机数
    //     const randomNumber2 = Math.floor(Math.random() * (100 - 50 + 1)) + 50; // 生成50到100之间的随机数
    //     const randomNumber3 = Math.floor(Math.random() * (100 - 50 + 1)) + 50; // 生成50到100之间的随机数
    //     this.appear.push(randomNumber1);
    //     this.up.push(randomNumber2);
    //     this.shake.push(randomNumber3);
    //   }
    //   this.updateChartData();
    // },
    // updateChartData() {
    //   if (this.label === "一班") {
    //     this.sanlv = this.appear.map((val) => val / 100);
    //   } else if (this.label === "二班") {
    //     this.sanlv = this.up.map((val) => val / 100);
    //   } else if (this.label === "三班") {
    //     this.sanlv = this.shake.map((val) => val / 100);
    //   }
    //   this.updateChartOptions();
    // },
    // updateChartOptions() {
    //   const myChart7 = echarts.init(this.$refs.myChart7, zhuti);

    //   const option5 = {
    //     grid: {
    //       top: "0%",
    //       bottom: "5%",
    //     },
    //     tooltip: {
    //       show: true,
    //       trigger: "item",
    //       formatter: function (params) {
    //         return (
    //           params.data.name +
    //           "：" +
    //           Math.round(params.data.value * 100) +
    //           "%"
    //         );
    //       },
    //     },
    //     series: [
    //       {
    //         type: "gauge",
    //         startAngle: 180,
    //         endAngle: 0,
    //         center: ["50%", "80%"],
    //         radius: "100%",
    //         min: 0,
    //         max: 1,
    //         splitNumber: 8,
    //         axisLine: {
    //           lineStyle: {
    //             width: 6,
    //             color: [
    //               [0.6, "#FF6E76"],
    //               [0.85, "#58D9F9"],
    //               [1, "#7CFFB2"],
    //             ],
    //           },
    //         },

    //         pointer: {
    //           icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
    //           length: "25%",
    //           width: 6,
    //           offsetCenter: [0, "-20%"],
    //         },
    //         axisTick: {
    //           length: 6,
    //           lineStyle: {
    //             color: "auto",
    //             width: 1,
    //           },
    //         },
    //         splitLine: {
    //           length: 10,
    //           lineStyle: {
    //             color: "auto",
    //             width: 3,
    //           },
    //         },
    //         axisLabel: {
    //           show: false,
    //         },
    //         title: {
    //           show: false,
    //           offsetCenter: [0, "-10%"],
    //           fontSize: 20,
    //         },
    //         detail: {
    //           show: false,
    //           fontSize: 20,
    //           offsetCenter: [0, "-35%"],
    //           valueAnimation: true,
    //           formatter: function (value) {
    //             return Math.round(value * 100) + "%";
    //           },
    //           color: "inherit",
    //         },
    //         data: [
    //           {
    //             value: this.sanlv[0],

    //             name: "一班",
    //             itemStyle: {
    //               color: "yellow",
    //             },
    //           },
    //         ],
    //       },
    //       {
    //         type: "gauge",
    //         startAngle: 180,
    //         endAngle: 0,
    //         center: ["50%", "80%"],
    //         radius: "100%",
    //         min: 0,
    //         max: 1,
    //         splitNumber: 8,
    //         axisLine: {
    //           lineStyle: {
    //             width: 6,
    //             color: [
    //               [0.6, "#FF6E76"],
    //               [0.85, "#58D9F9"],
    //               [1, "#7CFFB2"],
    //             ],
    //           },
    //         },

    //         pointer: {
    //           icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
    //           length: "25%",
    //           width: 6,
    //           offsetCenter: [0, "-20%"],
    //         },
    //         axisTick: {
    //           length: 6,
    //           lineStyle: {
    //             color: "auto",
    //             width: 1,
    //           },
    //         },
    //         splitLine: {
    //           length: 10,
    //           lineStyle: {
    //             color: "auto",
    //             width: 3,
    //           },
    //         },
    //         axisLabel: {
    //           show: false,
    //         },
    //         title: {
    //           show: false,
    //           offsetCenter: [0, "-10%"],
    //           fontSize: 20,
    //         },
    //         detail: {
    //           show: false,
    //           fontSize: 20,
    //           offsetCenter: [0, "-35%"],
    //           valueAnimation: true,
    //           formatter: function (value) {
    //             return Math.round(value * 100) + "%";
    //           },
    //           color: "inherit",
    //         },
    //         data: [
    //           {
    //             value: this.sanlv[1],

    //             name: "二班",
    //             itemStyle: {
    //               color: "red",
    //             },
    //           },
    //         ],
    //       },
    //       {
    //         type: "gauge",
    //         startAngle: 180,
    //         endAngle: 0,
    //         center: ["50%", "80%"],
    //         radius: "100%",
    //         min: 0,
    //         max: 1,
    //         splitNumber: 8,
    //         axisLine: {
    //           lineStyle: {
    //             width: 6,
    //             color: [
    //               [0.6, "#FF6E76"],
    //               [0.85, "#58D9F9"],
    //               [1, "#7CFFB2"],
    //             ],
    //           },
    //         },

    //         pointer: {
    //           icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
    //           length: "25%",
    //           width: 6,
    //           offsetCenter: [0, "-20%"],
    //         },
    //         axisTick: {
    //           length: 6,
    //           lineStyle: {
    //             color: "auto",
    //             width: 1,
    //           },
    //         },
    //         splitLine: {
    //           length: 10,
    //           lineStyle: {
    //             color: "auto",
    //             width: 3,
    //           },
    //         },
    //         axisLabel: {
    //           show: false,
    //         },
    //         title: {
    //           show: false,
    //           offsetCenter: [0, "-10%"],
    //           fontSize: 20,
    //         },
    //         detail: {
    //           show: false,
    //           fontSize: 20,
    //           offsetCenter: [0, "-35%"],
    //           valueAnimation: true,
    //           formatter: function (value) {
    //             return Math.round(value * 100) + "%";
    //           },
    //           color: "inherit",
    //         },
    //         data: [
    //           {
    //             value: this.sanlv[2],

    //             name: "三班",
    //             itemStyle: {
    //               color: "blue",
    //             },
    //           },
    //         ],
    //       },
    //     ],
    //   };

    //   myChart7.setOption(option5);
    //   window.addEventListener("resize", function () {
    //     // 改变图表尺寸，在容器大小发生改变时需要手动调用

    //     myChart7.resize();
    //   });
    // },
    ///
    getInfo() {
      this.$http({
        url: this.$http.adornUrl(
          `/chaoxing/majorratio/deep/${this.majorInfo.year}/${this.majorInfo.college}/${this.majorInfo.major}`
        ),
        method: "get",
      }).then((response) => {
        this.kaoyan = response.data.data;
        this.chuguo = this.generateChuguoData(this.kaoyan);
        this.$nextTick(()=>{
          this.initialize();
        })
      });
    },
    generateChuguoData(kaoyan) {
      let chuguo = [];
      chuguo.push(kaoyan[0] - 8);
      chuguo.push(kaoyan[1] - 9);
      chuguo.push(kaoyan[2] - 11);
      return chuguo;
    },
    initialize() {
      const myChart7 = echarts.init(this.$refs.myChart7, zhuti);
      const myChart8 = echarts.init(this.$refs.myChart8, zhuti);

      // 深造配置
      const option6 = {
        // title: {
        //   text: "深造比",
        // },
        grid: {
          top: "10px",
          bottom: "10px",
        },
        color: "#91cc75",
        // legend: {
        //   data: ["意向考研比"],
        //   bottom: "10%",
        // },
        legend: {
          data: ["考研"],
        },
        tooltip: {
          trigger: "item", //item图形触发
        },
        radar: {
          radius: "100%",
          center: ["50%", "65%"], // 设置雷达图位置
          // shape: 'circle',
          indicator: [
            {
              name: "一班",
              max: 30,
              nameGap: -78,
              nameLocation: "start",
              nameRotate: 0,
            },
            { name: "二班", max: 30 },
            { name: "三班", max: 30 },
          ],
        },
        series: [
          {
            name: "考研比",
            type: "radar",
            data: [
              {
                value: this.kaoyan,
                name: "意向考研人数",
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#3fb1e3",
                    },
                    {
                      offset: 1,
                      color: "#3fb1e3",
                    },
                  ]),
                },
                itemStyle: {
                  color: "#3fb1e3",
                  emphasis: {
                    color: "#3fb1e3",
                  },
                },
              },
            ],
          },
        ],
      };

      //  考研
      const option7 = {
        // title: {
        //   text: "深造比",
        // },
        grid: {
          top: "10px",
          bottom: "10px",
        },
        color: "#91cc75",
        // legend: {
        //   data: ["意向考研比"],
        //   bottom: "10%",
        // },
        legend: {
          data: ["出国留学"],
        },
        tooltip: {
          trigger: "item", //item图形触发
        },
        radar: {
          radius: "100%",
          center: ["50%", "65%"], // 设置雷达图位置
          // shape: 'circle',
          indicator: [
            {
              name: "一班",
              max: 30,
              nameGap: -78,
              nameLocation: "start",
              nameRotate: 0,
            },
            { name: "二班", max: 30 },
            { name: "三班", max: 30 },
          ],
        },
        series: [
          {
            name: "考研比",
            type: "radar",
            data: [
              {
                value: this.chuguo,
                name: "意向出国比",

                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#3fb1e3",
                    },
                    {
                      offset: 1,
                      color: "#3fb1e3",
                    },
                  ]),
                },
                itemStyle: {
                  color: "#3fb1e3",
                  emphasis: {
                    color: "#3fb1e3",
                  },
                },
              },
            ],
          },
        ],
      };
      // 出国留学
      myChart8.setOption(option6);
      myChart7.setOption(option7);
      window.addEventListener("resize", function () {
        // 改变图表尺寸，在容器大小发生改变时需要手动调用
        myChart7.resize();
        myChart8.resize();
      });
    },
  },

  beforeDestroy() {
    pubsub.unsubscribe(this.pubId);
  },
};
</script>

<style scoped>
.k5 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; /* 子组件内部垂直排列 */
  justify-content: center;
  align-items: center;
}
h4 {
  flex: 1;
  width: 100%;
  height: 100%;
  line-height: 100%;
  color: aqua;
  margin-bottom: 5px;
  /* padding-left: 17px;
  background-image: url("@/assets/title.png");
  background-repeat: no-repeat;
  background-size: contain; */
}
.keep {
  flex: 9;
  width: 100%;
  height: 100%;
  padding: 10px;

  display: flex;
  justify-content: center;
  align-items: center;

  /* border-radius: 15px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.35); */
}

#passDiv1,
#passDiv2 {
  flex: 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  width: 45%;
}
</style>
